<script setup>
import { ref } from 'vue';
import { addSections, addTextContents } from '@/api/post.js'; // 导入两个方法

const emit = defineEmits(['submit-success']);

const props = defineProps({
  chapterId: {
    type: Number,
    required: true
  }
});

const form = ref({
  sectionName: '',
  sectionType: '',
  video: '',
  text: ''
});

const handleTypeChange = (value) => {
  console.log('小节类型已更改为:', value);
  // 可以根据类型重置其他字段
  if (value !== 'video') form.value.video = '';
  if (value !== 'text') form.value.text = '';
};

const onSubmit = async () => {
  console.log('提交表单:', form.value);

  if (!form.value.sectionType) {
    console.error('请选择小节类型');
    return;
  }

  try {
    // 调用 addSections 方法
    const sectionData = {
      title: form.value.sectionName,
      type: form.value.sectionType,
      chapter_id: props.chapterId // 传递章节 ID
    };
    console.log('Sending sectionData:', sectionData); // 打印 sectionData
    const sectionResponse = await addSections(sectionData);
    console.log('Sections 提交成功:', sectionResponse.data);

    // 确保 sectionResponse.data.id 存在
    if (!sectionResponse.data.id) {
      throw new Error('section_id 未正确返回');
    }

    // 如果是文本类型，调用 addTextContents 方法
    if (form.value.sectionType === 'text') {
      const textContentData = {
        content: form.value.text,
        section_id: sectionResponse.data.id // 使用 sections 表的 id 作为 section_id
      };
      console.log('Sending textContentData:', textContentData); // 打印 textContentData
      const textContentResponse = await addTextContents(textContentData);
      console.log('TextContents 提交成功:', textContentResponse.data);
    }

    // 触发提交成功事件
    emit('submit-success');

    // 清空表单（可选）
    form.value = {
      sectionName: '',
      sectionType: '',
      video: '',
      text: ''
    };
  } catch (error) {
    console.error('提交失败:', error);
  }
};
</script>

<template>
  <el-form :model="form" label-width="120px">
    <!-- 小节名 -->
    <el-form-item label="小节名">
      <el-input v-model="form.sectionName" placeholder="请输入小节名"></el-input>
    </el-form-item>

    <!-- 小节类型 -->
    <el-form-item label="小节类型">
      <el-select v-model="form.sectionType" placeholder="请选择小节类型" @change="handleTypeChange">
        <el-option label="视频" value="video"></el-option>
        <el-option label="文本" value="text"></el-option>
      </el-select>
    </el-form-item>

    <!-- 动态内容区域 -->
    <div v-if="form.sectionType === 'video'">
      <el-form-item label="视频上传">
        <el-upload action="https://your-upload-endpoint">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="附件上传">
        <el-upload action="https://your-upload-endpoint">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </div>

    <div v-if="form.sectionType === 'text'">
      <el-form-item label="文本">
        <el-input v-model="form.text" type="textarea" placeholder="请输入文本内容"></el-input>
      </el-form-item>
    </div>

    <!-- 添加按钮 -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
/* 你可以在这里添加样式 */
</style>
